<template>
	<div class="userRelation">
		<div class="userRelation-page">
			<AreaTitleWarp :title="'紧急联系人'"></AreaTitleWarp>
			<div class="Contacts" v-if="mobileInfoData">
				<AreaWarp :padding="false" >
			        <el-table  :data="mobileInfoData.conList" style="width: 100%" class="pub-table" header-row-class-name="pub-table-header-row"
			                  header-cell-class-name="pub-table-header-cell">
			          <el-table-column type="index" width="50" label="序号"></el-table-column>
			          <el-table-column prop="relate" label="关系" min-width="120"></el-table-column>
			          <el-table-column prop="name" label="联系人姓名" min-width="120"></el-table-column>
			          <el-table-column prop="nickname" label="通讯录备注" min-width="120"></el-table-column>
			          <el-table-column prop="mobile" label="手机号码" min-width="120"></el-table-column>
			          <el-table-column prop="callCnt" label="通话次数" min-width="120"></el-table-column>
			          <el-table-column prop="callLen" label="通话时长(分)" min-width="120"></el-table-column>
			          <el-table-column prop="callOutCnt" label="主叫次数" min-width="120"></el-table-column>
			          <el-table-column prop="callInCnt" label="被叫次数" min-width="120"></el-table-column>
			          <el-table-column prop="startTime" label="最近一次联系时间" min-width="180" :formatter="formatter_timeYMDHMS"></el-table-column>
			          <el-table-column prop="phoneNumLoc" label="归属地" min-width="120"></el-table-column>
			          <el-table-column  label="操作" min-width="120">
			          	<template slot-scope="scope">
			          		<el-button type="text" size="small" @click="followUp(scope.row,1)">跟进</el-button>
			          	</template>
			        </el-table-column>
			        </el-table>
			    </AreaWarp>
			</div>
		</div>
		<div class="userRelation-page">
			<AreaTitleWarp :title="'联系人信息'"></AreaTitleWarp>
			<el-tabs v-model="activeName">
			    <el-tab-pane label="运营商" name="1">
			    	<div v-if="mobileInfoData">
				    	<AreaWarp :padding="false" >
					        <el-table  :data="mobileInfoData.list" style="width: 100%" class="pub-table" header-row-class-name="pub-table-header-row"
					                  header-cell-class-name="pub-table-header-cell">
					          <el-table-column prop="contactName" label="通讯录名称" min-width="120"></el-table-column>
					          <el-table-column prop="phoneNum" label="联系号码" min-width="120"></el-table-column>
					          <el-table-column prop="callCnt" label="联系次数" min-width="100"></el-table-column>
					          <el-table-column prop="callLen" label="联系时间" min-width="100"></el-table-column>
					          <el-table-column prop="callOutCnt" label="主叫次数" min-width="100"></el-table-column>
					          <el-table-column prop="callInCnt" label="被叫次数" min-width="100"></el-table-column>
					          <el-table-column prop="startTime" label="最近一次联系时间" min-width="160" :formatter="formatter_timeYMDHMS"></el-table-column>
					          <el-table-column prop="phoneNumLoc" label="归属地" min-width="120"></el-table-column>
					          <el-table-column  label="操作" min-width="120">
					          	<template slot-scope="scope">
					          		<el-button type="text" size="small" @click="followUp(scope.row,2)">跟进</el-button>
					          	</template>
					        </el-table-column>
					        </el-table>
					    </AreaWarp>
				    </div>
			    </el-tab-pane>
			    <el-tab-pane label="通讯录" name="2">
			    	<userMailList :queryMsg="queryMsg"></userMailList>
			    </el-tab-pane>
			</el-tabs>
		</div>


		<userCollectionAdd :queryMsg="queryMsg" :message="message" v-if="dialogVisibleShow" @userCollection="userCollection"></userCollectionAdd>

	</div>
</template>
<script>
	import userMailList from './usermailList.vue';
	import userCollectionAdd from './userCollectionAdd.vue'
	export default({
		props:["queryMsg"],
		data(){
			return{
				activeName: '1',
				userRelationLoading: false,
				mobileInfoData:{
					conList:[
						{
							"relate": "父母",
							"name": "轻松",
							"nickname": "轻松",
							"mobile": "13645678989",
							"contactName": "李艳",
							"phoneNum": "15868439043",
							"phoneNumLoc": "浙江",
							"callCnt": "114",
							"callLen": "97.15000",
							"callOutCnt": "77",
							"callInCnt": "37",
							"startTime": 1506334704000
						},
					],
					list:[
						{
							"callOutCnt": 59,
							"callLen": "535.23",
							"contactName": "未知",
							"callCnt": 115,
							"phoneNum": "15824506159",
							"startTime": 1531312403000,
							"callInCnt": 56,
							"phoneNumLoc": "宁波"
						},
					]
				},
				dialogVisibleShow: false,
				message: null
			}
		},
		components:{
			userMailList,
			userCollectionAdd
		},
		methods:{
			mobileInfo(){
				let that = this;
				that.userRelationLoading = true;
				that.ajaxJson({
			        url: '/collection/mobileInfo',
			        data: {
			            userId: that.queryMsg.userId
			        },
			        success: function (data) {
			            if (data.code == '0') {
			              that.mobileInfoData = data.data
			            }
			            that.userRelationLoading = false;
			        }
		        })
			},
			followUp(row,index){
				let that = this;
				if(index==1){
					that.message = {
						relationName: row.name,
						relationMobile: row.mobile
					}	
				}else if(index==2){
					that.message = {
						relationName: row.contactName,
						relationMobile: row.phoneNum
					}
				}
				
				that.dialogVisibleShow = true;
			},
			userCollection(row){
				let that = this;
				that.dialogVisibleShow = row.dialogVisibleShow;
			}
		},
		created(){
			let that = this;
			that.mobileInfo();
		}
	})
</script>
<style lang="less">
	.userRelation{
		.el-tabs{
			margin-top:0 !important;
		}
	}
</style>